<template>
	<view>
		<view class="classbox">
			<!-- 左 -->
			<view class="classbox-left">
				<view v-for="item in tabList">
					<view style="width: 100%;height: 60upx;margin-top: 10px;" @click="ontab(item)">
					<span :class='currentIndex==item.index?"active":""'  style='display: block;width: 100%;height: 60upx;text-align: center; line-height: 60upx; '>{{item.name}}</span>
					</view>
				</view>
			</view>
			<!-- 右 -->
			<view class="classbox-right">
				<view v-if="currentIndex==1" >
					<view style="width: 90%;margin: 30upx auto;color: #999;">
						<span style='display: block;margin-left: 20upx;'>推荐</span>
						<view v-for="item in shopAll" v-if='currentIndex==1'
							style="width: 46%; height: 350upx;box-shadow: 1px 1px 4px #f8eeee;float: left;border-radius: 20px;margin-top: 40upx;margin-left: 4%;">
							<img @click="jump(item)" style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
								:src='item.url' />
							<view style="width: 100%;height: 30upx;">
								<span style='color:#b4b4b4;font-size: 13px;margin-left: 20upx; '>{{item.name}}</span>
							</view>
							<view
								style="width: 100%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
								<!-- <view> -->
									<span style='font-size: 12upx;color: red;line-height: 70upx;'>￥
										<span style='font-size: 20px;'>{{item.price}}</span>
									</span>
								<!-- </view> -->
								<!-- <view> -->
									<span
										style='font-size: 12upx;line-height: 70upx;color: #a0a0a0; height: 40upx;'>已有{{item.Collection}}人收藏</span>
								<!-- </view> -->
							</view>
							<view
								style="width: 90%;height: 90upx;margin: 0 auto;display: flex; margin-top: 15upx;">
								<!-- <img style='width: 20%; height:60%;margin-top: 15upx;' -->
									<!-- src='http://127.0.0.1:7001/public/whj/touxiang.png' /> -->
								<view style="width: 70%;height: 100%;margin-left: 5%;">
								<!-- <span style='display: block;margin-top: 20upx;font-size: 15upx;'>用户名</span> -->
									<!-- <span style='display: block;font-size:12px'>粉丝：{{item.fans}} 关注：{{item.follow}}</span> -->
								</view>
								
						
							</view>
						</view>
					</view>
				</view>
				<view v-if="currentIndex==2">
					<span style='display: block;text-align: center;margin-top: 40upx;'>暂无数据</span>
					</view>
					<view v-if="currentIndex==3">
						<span style='display: block;text-align: center;margin-top: 40upx;'>暂无数据</span>
						</view>
						<view v-if="currentIndex==4">
							<view style="width: 90%;margin: 30upx auto;color: #999;">
								<span style='display: block;margin-left: 20upx;'>女装</span>
								<view v-for="item in shopNV" v-if='currentIndex==4'
									style="width: 46%; height: 350upx;box-shadow: 1px 1px 4px #f8eeee;float: left;border-radius: 20px;margin-top: 40upx;margin-left: 4%;">
									<img @click="jump(item)" style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
										:src='item.url' />
									<view style="width: 100%;height: 30upx;">
										<span style='color:#b4b4b4;font-size: 13px;margin-left: 20upx; '>{{item.name}}</span>
									</view>
									<view
										style="width: 90%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
										<view>
											<span style='font-size: 12upx;color: red;line-height: 70upx;display: flex;'>￥
												<span style='font-size: 20px;'>{{item.price}}</span>
											</span>
										</view>
										<view>
											<span
												style='font-size: 12upx;display: flex;line-height: 70upx;color: #a0a0a0;'>已有{{item.Collection}}人收藏</span>
										</view>
									</view>
									<view
										style="width: 90%;height: 90upx;margin: 0 auto;display: flex; margin-top: 15upx;">
										<!-- <img style='width: 20%; height:60%;margin-top: 15upx;' -->
											<!-- src='http://127.0.0.1:7001/public/whj/touxiang.png' /> -->
										<view style="width: 70%;height: 100%;margin-left: 5%;">
										<!-- <span style='display: block;margin-top: 20upx;font-size: 15upx;'>用户名</span> -->
											<!-- <span style='display: block;font-size:12px'>粉丝：{{item.fans}} 关注：{{item.follow}}</span> -->
										</view>
										
								
									</view>
								</view>
							</view>
						
							</view>
							<view v-if="currentIndex==5">
								<!--  -->
								<view style="width: 90%;margin: 30upx auto;color: #999;">
									<span style='display: block;margin-left: 20upx;'>生活百货</span>
									<view v-for="item in shop5" v-if='currentIndex==5'
										style="width: 46%; height: 350upx;box-shadow: 1px 1px 4px #f8eeee;float: left;border-radius: 20px;margin-top: 40upx;margin-left: 4%;">
										<img @click="jump(item)" style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
											:src='item.url' />
										<view style="width: 100%;height: 30upx;">
											<span style='color:#b4b4b4;font-size: 13px;margin-left: 20upx; '>{{item.name}}</span>
										</view>
										<view
											style="width: 90%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
											<view>
												<span style='font-size: 12upx;color: red;line-height: 70upx;display: flex;'>￥
													<span style='font-size: 20px;'>{{item.price}}</span>
												</span>
											</view>
											<view>
												<span
													style='font-size: 12upx;display: flex;line-height: 70upx;color: #a0a0a0;'>已有{{item.Collection}}人收藏</span>
											</view>
										</view>
										<view
											style="width: 90%;height: 90upx;margin: 0 auto;display: flex; margin-top: 15upx;">
											<!-- <img style='width: 20%; height:60%;margin-top: 15upx;' -->
												<!-- src='http://127.0.0.1:7001/public/whj/touxiang.png' /> -->
											<view style="width: 70%;height: 100%;margin-left: 5%;">
											<!-- <span style='display: block;margin-top: 20upx;font-size: 15upx;'>用户名</span> -->
												<!-- <span style='display: block;font-size:12px'>粉丝：{{item.fans}} 关注：{{item.follow}}</span> -->
											</view>
												</view>
													</view>
														</view>
									<!--  -->
							</view>
							<view v-if="currentIndex==6" >
								<view style="width: 90%;margin: 30upx auto;color: #999;">
									<span style='display: block;margin-left: 20upx;'>运动户外</span>
									<view v-for="item in shop6" v-if='currentIndex==6'
										style="width: 46%; height: 350upx;box-shadow: 1px 1px 4px #f8eeee;float: left;border-radius: 20px;margin-top: 40upx;margin-left: 4%;">
										<img @click="jump(item)" style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
											:src='item.url' />
										<view style="width: 100%;height: 30upx;">
											<span style='color:#b4b4b4;font-size: 13px;margin-left: 20upx; '>{{item.name}}</span>
										</view>
										<view
											style="width: 90%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
											<view>
												<span style='font-size: 12upx;color: red;line-height: 70upx;display: flex;'>￥
													<span style='font-size: 20px;'>{{item.price}}</span>
												</span>
											</view>
											<view>
												<span
													style='font-size: 12upx;display: flex;line-height: 70upx;color: #a0a0a0;'>已有{{item.Collection}}人收藏</span>
											</view>
										</view>
										<view
											style="width: 90%;height: 90upx;margin: 0 auto;display: flex; margin-top: 15upx;">
										<!-- 	<img style='width: 20%; height:60%;margin-top: 15upx;'
												src='http://127.0.0.1:7001/public/whj/touxiang.png' /> -->
											<view style="width: 70%;height: 100%;margin-left: 5%;">
											<!-- <span style='display: block;margin-top: 20upx;font-size: 15upx;'>用户名</span> -->
												<!-- <span style='display: block;font-size:12px'>粉丝：{{item.fans}} 关注：{{item.follow}}</span> -->
											</view>
												</view>
													</view>
														</view>
								
								
							</view>	
								<view v-if="currentIndex==7">
									<span style='display: block;text-align: center;margin-top: 40upx;'>暂无数据</span>
								</view>
								<view v-if="currentIndex==8">
									<view style="width: 90%;margin: 30upx auto;color: #999;">
										<span style='display: block;margin-left: 20upx;'>美妆</span>
										<view v-for="item in shop8" v-if='currentIndex==8'
											style="width: 46%; height: 350upx;box-shadow: 1px 1px 4px #f8eeee;float: left;border-radius: 20px;margin-top: 40upx;margin-left: 4%;">
											<img @click="jump(item)" style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
												:src='item.url' />
											<view style="width: 100%;height: 30upx;">
												<span style='color:#b4b4b4;font-size: 13px;margin-left: 20upx; '>{{item.name}}</span>
											</view>
											<view
												style="width: 90%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
												<view>
													<span style='font-size: 12upx;color: red;line-height: 70upx;display: flex;'>￥
														<span style='font-size: 20px;'>{{item.price}}</span>
													</span>
												</view>
												<view>
													<span
														style='font-size: 12upx;display: flex;line-height: 70upx;color: #a0a0a0;'>已有{{item.Collection}}人收藏</span>
												</view>
											</view>
											<view
												style="width: 90%;height: 90upx;margin: 0 auto;display: flex; margin-top: 15upx;">
												<!-- <img style='width: 20%; height:60%;margin-top: 15upx;' -->
													<!-- src='http://127.0.0.1:7001/public/whj/touxiang.png' /> -->
												<view style="width: 70%;height: 100%;margin-left: 5%;">
												<!-- <span style='display: block;margin-top: 20upx;font-size: 15upx;'>用户名</span> -->
													<!-- <span style='display: block;font-size:12px'>粉丝：{{item.fans}} 关注：{{item.follow}}</span> -->
												</view>
													</view>
														</view>
															</view>
								</view>
								
			
			<view v-if="currentIndex==9">
				<span style='display: block;text-align: center;margin-top: 40upx;'>暂无数据</span>
			</view>
			<view v-if="currentIndex==10">
				<view style="width: 90%;margin: 30upx auto;color: #999;">
					<span style='display: block;margin-left: 20upx;'>儿童玩具</span>
					<view v-for="item in shop10" v-if='currentIndex==10'
						style="width: 46%; height: 350upx;box-shadow: 1px 1px 4px #f8eeee;float: left;border-radius: 20px;margin-top: 40upx;margin-left: 4%;">
						<img @click="jump(item)" style='width: 100%;height: 230upx;border-top-left-radius: 20px;border-top-right-radius: 20px;'
							:src='item.url' />
						<view style="width: 100%;height: 30upx;">
							<span style='color:#b4b4b4;font-size: 13px;margin-left: 20upx; '>{{item.name}}</span>
						</view>
						<view
							style="width: 90%;height: 50upx;margin: 0 auto;display: flex;justify-content: space-between">
							<view>
								<span style='font-size: 12upx;color: red;line-height: 70upx;display: flex;'>￥
									<span style='font-size: 20px;'>{{item.price}}</span>
								</span>
							</view>
							<view>
								<span
									style='font-size: 12upx;display: flex;line-height: 70upx;color: #a0a0a0;'>已有{{item.Collection}}人收藏</span>
							</view>
						</view>
						<view
							style="width: 90%;height: 90upx;margin: 0 auto;display: flex; margin-top: 15upx;">
							<!-- <img style='width: 20%; height:60%;margin-top: 15upx;' -->
								<!-- src='http://127.0.0.1:7001/public/whj/touxiang.png' /> -->
							<view style="width: 70%;height: 100%;margin-left: 5%;">
							<!-- <span style='display: block;margin-top: 20upx;font-size: 15upx;'>用户名</span> -->
								<!-- <span style='display: block;font-size:12px'>粉丝：{{item.fans}} 关注：{{item.follow}}</span> -->
							</view>
								</view>
									</view>
										</view>
			</view>
			
			<view v-if="currentIndex==11">
				<span style='display: block;text-align: center;margin-top: 40upx;'>暂无数据</span>
			</view>
			
			<view v-if="currentIndex==12">
				<span style='display: block;text-align: center;margin-top: 40upx;'>暂无数据</span>
			</view>
	
			<view v-if="currentIndex==14">
				<span style='display: block;text-align: center;margin-top: 40upx;'>暂无数据</span>
			</view>
			</view>
			
			<view>
				
				
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [
				 {
						name: '热门推荐',
						index: 1
					}, {
						name: '手机数码',
						index: 2
					}, {
						name: '家用电器',
						index: 3

					}, {
						name: '女装',
						index: 4
					}, {
						name: '生活百货',
						index: 5
					}, {
						name: '运动户外',
						index: 6
					}, {
						name: '乐器',
						index: 7
					},
					{
						name: ' 美妆 ',
						index: 8
					}, {
						name: '家具/饰品',
						index: 9

					}, {
						name: '儿童玩具',
						index: 10

					}, {
						name: '宠物用品',
						index: 11


					}, {
						name: '园艺用品',
						index: 12

					},  {
						name: '健身器材',
						index:14

					},
				],
				currentIndex:1,
				shopAll:[],
				shopNV:[],
				shop5:[],
				shop6:[],
				shop8:[],
				shop10:[],
			}
		},
		methods: {
			ontab(item) {
				this.currentIndex=item.index
				console.log(this.currentIndex)
				
			},
			jump(item){
				console.log(item.id)
				uni.navigateTo({
					url:`/pages/fenlei/fenlei?id=${item.id}`
				})
			}
		},
		onLoad(){
			this.$api.getfenleiList().then(res=>{
				this.shopAll=res.data
				this.shopNV=this.shopAll.slice(6,8)
				this.shop5=this.shopAll.slice(0,4)
				this.shop6=this.shopAll.slice(6,10)
				this.shop8=this.shopAll.slice(0,5)
				this.shop10=this.shopAll.slice(1,3)
			})
		}
	}
</script>

<style lang="scss">
	.classbox {
		width: 100%;
		height: 100vh;
		display: flex;

		.classbox-left {
			width: 25%;
			height: 76%;
			border-right: 1px solid #999;
			position: fixed;
		}

		.classbox-right {
			width: 80%;
			height: 100%;
			// background: blue;
			margin-left: 25%;
		}
	.active {
			color: white;
			background: rgb(40, 210, 209);
			
		}
	}
</style>
